<div [attr.class]="'da-nav da-nav-' + 'left'" *ngIf="mode==='left'">
  <div class="da-nav-menu">
    <ng-container *ngFor="let item of data">
      <div
        class="da-nav-item" (mouseenter)="setActive(item)" (mouseleave)="onMouseLeave()" [class.active]="activeItem === item.title" 
      >
        <span
          class="da-nav-title"
        >
          <i [class]="item.menuIcon"></i>
          </span
        >

      </div>
    </ng-container>

  </div>
</div>

<div [attr.class]="'da-nav da-nav-' + 'top'" *ngIf="mode==='top'">
  <div class="scroll-button " (click)="scrollUp()"><span><i class="icon icon-collapse"></i></span></div>
  <div class="da-nav-menu1">
    <ng-container
      *ngFor="let item of data" >
      <div
        class="da-nav-item" (mouseenter)="setTopActive(item)"  [class.active]="activeItem === item.title"
      >
        <span
          class="da-nav-title"
        >
          <i [class]="item.menuIcon"></i>
          <span  style="margin-left: 8px">{{
            item.title
          }}</span></span
        >
      </div>
    </ng-container>

  </div>
  <div class="scroll-button " (click)="scrollDown()" ><span><i class="icon icon-chevron-right"></i></span></div>
</div>
